<script setup lang="ts">
import { reactive, ref } from 'vue'
import type { FormInstance } from 'element-plus'
import useStore from '../../modules/store/User'
// import type { FormInstance } from 'element-plus'
import {ElMessageBox} from "element-plus";
let store = useStore()
const formRef = ref<FormInstance>()
const dialogVisible = ref(false)
// 搜索数据
const numberValidateForm = reactive({
  state: '',
  name: '',
  time: ''
})
// 添加数据
const formInline = reactive({
  key: 0,
  amount: 0,
  name: '',
  number: '',
  picture: '',
  region: '',
  state: '',
  quantity: 0,
  time: ''
})
const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid:boolean) => {
    if (valid) {
      console.log(numberValidateForm)
      store.searchA(numberValidateForm)
      console.log('submit!')
    } else {
      console.log('error submit!')
      return false
    }
  })
}
const options= [{
  value: '正常',
  label: '正常',
},
  {
    value: '解锁',
    label: '解锁',
  },
  {
    value: '锁定',
    label: '锁定',
  }]
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
  numberValidateForm.name = '';
  numberValidateForm.time = '';
  numberValidateForm.state = ''
  store.searchA(numberValidateForm)
}
const handleClose = (done: () => void) => {
  ElMessageBox.confirm('Are you sure to close this dialog?')
      .then(() => {
        done()
      })
      .catch(() => {
        // catch error
      })
}
const onSubmit = (formEl: FormInstance | undefined) => {
      if (!formEl) return
  console.log(formEl)
      formEl.validate((valid:boolean) => {
        if (valid) {
          console.log(formInline)
          dialogVisible.value = false
          // store.editA(formInline,key)
          store.add(formInline)
          console.log('submit!')
        } else {
          console.log('error submit!')
          return false
        }
      })
    }

const add = () =>{
  formInline.key = store.list[store.list.length - 1].key + 1
  dialogVisible.value= true
}
const lockA = () => {
  store.lock()
};
const UnlockA = ()=>{
  store.Unlock()
}
</script>

<template>
  <el-form
      style="display: flex"
      ref="formRef"
      :model="numberValidateForm"
      label-width="100px"
      class="demo-ruleForm"
  >
    <el-form-item
        label="状态"
        prop="state"
        :rules="[
        { required: false, message: '请填入相关信息' },
        { type: 'string', message: '需要类型匹配' },
      ]"
    >
      <el-select v-model="numberValidateForm.state" clearable  class="m-2" placeholder="状态">
        <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item
        label="注册时间"
        prop="time"
        :rules="[
        { required: false, message: '请填入相关信息' },
        { type: 'string', message: '需要类型匹配' },
      ]"
    >
      <el-date-picker
          v-model.trim="numberValidateForm.time"
          type="date"
          value-format="YYYY-MM-DD"
          placeholder="Pick a date"
          :default-value="new Date(2023, 7, 14)"
      />
    </el-form-item>
    <el-form-item
        label="用户"
        prop="name"
        :rules="[
        { required: false, message: '请填入相关信息' },
        { type: 'string', message: '需要类型匹配' },
      ]"
    >
      <el-input
          v-model.trim="numberValidateForm.name"
          type="text"
          autocomplete="off"
          placeholder="请输入昵称/手机号"
      />
    </el-form-item>
    <el-form-item>
      <el-button type="warning" class="button" @click="submitForm(formRef)">搜索</el-button>
      <el-button type="warning" plain @click="resetForm(formRef)">重置</el-button>
    </el-form-item>
  </el-form>
  <el-row>
    <el-button type="warning" class="button"  @click="add">+添加</el-button>
    <el-button type="warning" class="button" @click="lockA">锁定</el-button>
    <el-button type="warning" class="button" @click="UnlockA">解锁</el-button>
  </el-row>



  <el-dialog
      v-model="dialogVisible"
      title="Tips"
      width="30%"
      :before-close="handleClose"
  >
    <el-form :inline="true" ref="formRef" :model="formInline" class="demo-form-inline">
      <el-form-item label="昵称"
                    :rules="[
        { required: true, message: '请填入相关信息' },
        { type: 'string', message: '需要类型匹配' }
      ]"
                    prop="name">
        <el-input v-model="formInline.name" placeholder="Approved by" clearable />
      </el-form-item>
      <el-form-item
          label="手机号"
          :rules="[
        { required: true, message: '请填入电话号码' },
        { type: 'string', message: '需要类型匹配' },
        {
          pattern: /^[1][3-9][0-9]{9}$/,
          message: '需要正确的手机号',
          trigger: 'blur'
        },
      ]"
          prop="number">
        <el-input v-model="formInline.number" placeholder="Approved by" clearable />
      </el-form-item>
      <el-form-item
          label="区域"
          :rules="[
        { required: true, message: '请填入相关信息' },
        { type: 'string', message: '需要类型匹配' },
      ]"
          prop="region">
        <el-input v-model="formInline.region" placeholder="Approved by" clearable />
      </el-form-item>
      <el-form-item
          label="状态"
          :rules="[
        { required: true, message: '请填入相关信息' },
        { type: 'string', message: '需要类型匹配' },
      ]"
          prop="state">
<!--        <el-input v-model="formInline.state" placeholder="Approved by" clearable />-->
        <el-select v-model="formInline.state" clearable placeholder="Select">
          <el-option
              label="正常"
              value="正常"
          />
          <el-option
              label="锁定"
              value="锁定"
          />
        </el-select>
      </el-form-item>
      <el-form-item
          label="消费金额"
          :rules="[
        { required: true, message: '请填入相关信息' },
        { type: 'number', message: '需要类型匹配' },
      ]"
          prop="amount">
        <el-input v-model.number="formInline.amount" placeholder="Approved by" clearable />
      </el-form-item>
      <el-form-item
          label="订单数量"
          :rules="[
        { required: true, message: '请填入相关信息' },
        { type: 'number', message: '需要类型匹配' },
      ]"
          prop="quantity">
        <el-input v-model.number="formInline.quantity" placeholder="Approved by" clearable />
      </el-form-item>
      <el-form-item
          label="注册时间"
          :rules="[
        { required: true, message: '请填入相关信息' },
        { type: 'string', message: '需要类型匹配' },
      ]"
          prop="time">
        <el-date-picker
            v-model.trim="formInline.time"
            type="date"
            value-format="YYYY-MM-DD"
            placeholder="Pick a date"
            :default-value="new Date(2023, 7, 14)"
        />
<!--        <el-input v-model="formInline.time" placeholder="Approved by" clearable />-->
      </el-form-item>
      <el-form-item style="display: flex;justify-content: center" >
        <el-button class="button" type="primary" @click="onSubmit(formRef)">添加</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<style scoped lang="scss">
.button{
  background: #ffb300;
}
</style>

